<template>
  <div class="ue-box">
    <div id="editor" class="editor"></div>
  </div>
</template>
<script>
export default {
  name: 'UE',
  data() {
    return {
      editor: null
    }
  },
  props: {
    defaultMsg: {
      type: String
    },
    config: {
      type: Object
    }
  },
  mounted() {
    const _this = this
    this.editor = window.UE.getEditor('editor', this.config) // 初始化UE
    this.editor.addListener('ready', function() {
      _this.editor.setContent(_this.defaultMsg || '') // 确保UE加载完成后，放入内容。
    })
  },
  methods: {
    getUEContent() { // 获取内容方法
      return this.editor.getContent()
    },
    setUEContent(str) {
      this.editor.setContent(str)
    }
  },
  destroyed() {
    this.editor.destroy()
  }
}

</script>
<style type="text/css" scoped>
.editor {
  display: inline-block;
  width: 750px;
  height: 400px;
}

.ue-box {
  display: inline-block;
}

</style>
